<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 100px;height:100px;background: pink}
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>

    var box = document.querySelector("#box");

    // 需求：按下键盘时，在box内打印信息
    
    // 应该给谁，添加什么事件？

    document.onkeydown = function(eve){
        var e = eve || window.event;
        // 键码
        var code = e.keyCode || e.which;
        // box.innerHTML = code;

        // 功能键的判断方式
        // win: ctrl; MAC: control;
        // box.innerHTML = e.ctrlKey;

        // win: shift; MAC:shift
        // box.innerHTML = e.shiftKey;

        // win: alt; MAC: option
        // box.innerHTML = e.altKey;

        // win: 系统键; MAC: command
        // box.innerHTML = e.metaKey;

        // 常见的键码
        // switch(code){
        //     case 13:
        //     box.innerHTML = "按下了回车键";break;
        //     case 32:
        //     box.innerHTML = "按下了空格键";break;
        //     case 8:
        //     box.innerHTML = "按下了删除键";break;
        //     case 37:
        //     box.innerHTML = "按下了左键";break;
        //     case 38:
        //     box.innerHTML = "按下了上键";break;
        //     case 39:
        //     box.innerHTML = "按下了右键";break;
        //     case 40:
        //     box.innerHTML = "按下了下键";break;
        // }

        // 组合键一定要使用多个属性进行判断
        // if( e.ctrlKey && code === 13 ){
        //     box.innerHTML = "按下了ctrl + 回车键";
        // }

    }




</script>
</html>